<!-- 工作台头部组件 -->
<template>
  <div style="background: #fff" class="bg-[#fff] px-[20px] pt-[20px]">
    <div class="flex items-center gap-[6px]">
      <div class="h-[16px] w-[4px] bg-[#F43107] rounded-[10px]"></div>
      <span style="font-size: 16px;">功能列表</span>
    </div>
    <div class="flex gap-[18px] p-[20px]">
      <div
        :class="`grid gap-[10px] justify-items-center menu-item${
          selectedMenu == item.key ? '-selected' : ''
        }`"
        v-for="item in list"
        :key="item.key"
        @click="changeMenu(item.key)"
      >
        <img :src="item.img" height="60" width="60" />
        <span style="color: #304156">{{ item.name }}</span>
       
      </div>
    </div>
  </div>
</template>

<script setup>
import { getCurrentInstance, onMounted, ref, watch } from "vue";
import { useRoute } from "vue-router";
import { useCurrentMenuStore } from "../../stores/menuStore";
const store = useCurrentMenuStore();
//跳转
const router = useRouter();
const selectedMenu = ref("1");

const props = defineProps({
  modelValue: String,
  list: Array,
});

onMounted(() => {
  store.currentKey&&changeMenu1(store.currentKey);
});
watch(
  () => props.modelValue,
  () => {
    selectedMenu.value = props.modelValue;
  }
);
const emit = defineEmits(["update:modelValue"]);

const changeMenu1 = (val) => {
  store.changeCurrentTitle(props.list?.find((p) => p?.key == val)?.name, val);

emit("update:modelValue", val);
};
const changeMenu = (val) => {
  console.log(val);
  store.changeCurrentTitle(props.list?.find((p) => p?.key == val)?.name, val);
 let names = props.list?.find((p) => p?.key == val)?.name
  if(names == "数据定制服务"){
  const href = router.resolve({
     path: `/seo`,
  });
  window.open(href.href, "_blank");
  emit("update:modelValue", 1);
  return
}else if(names == "数据导出平台"){
  const href = router.resolve({
     path: `/dataservice`,
  });
  window.open(href.href, "_blank");
  return
}
emit("update:modelValue", val);
};
</script>

<style lang="scss" scoped>
.menu-item {
  background: #fff;
  cursor: pointer;
  height: 106px;
  width: 106px;
  padding: 10px;

  &:hover {
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    border-radius: 8px;
  }
}

.menu-item-selected {
  background: #fff;
  cursor: pointer;
  padding: 10px;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  border-radius: 8px;
  // margin-top: -10px;
  transform: translateY(-10px);
  height: 106px;
  width: 106px;
}
</style>
